<template>
  <page-frame bg="#fff" pageRouter="login">
    <div style="display: flex" class="Pc">
      <div style="flex: 1; position: relative">
        <img
            src="@/assets/images/banner.png"
            alt=""
            loading="lazy"
            width="100%"
            height="100%"
            style="
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
          "
        />
      </div>
      <div style="flex: 1">
        <div class="login-body">
          <div class="login-container">
            <div class="head">
              <div class="name">
                <div class="title" style="text-align: left">Create account</div>
              </div>
            </div>
            <el-form
                label-position="top"
                :model="ruleForm"
                ref="loginForm"
                class="login-form"
            >
              <el-form-item>
                <div
                    style="
                    font-size: 16px;
                    color: #333;
                    line-height: 24px;
                    margin-bottom: 4px;
                  "
                >
                  E-Mail
                </div>
                <input
                    type="text"
                    v-model.trim="ruleForm.username"
                    autocomplete="off"
                />
              </el-form-item>
              <el-form-item>
                <div
                    style="
                    font-size: 16px;
                    color: #333;
                    line-height: 24px;
                    margin-bottom: 4px;
                  "
                >
                  Code
                </div>
                <div style="display: flex; align-items: center">
                  <div style="width: 47%">
                    <input
                        type="text"
                        v-model.trim="ruleForm.code"
                        autocomplete="off"
                    />
                  </div>
                  <span
                      style="
                      background: #eee;
                      margin-left: 20px;
                      padding: 0 12px;
                      border-radius: 30px;
                      cursor: pointer;
                    "
                      @click="handlerCode"
                  >
                    {{ sendContent }}
                  </span>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="display: flex">
                  <div style="flex: 1; margin-right: 30px; position: relative">
                    <div
                        style="
                        font-size: 16px;
                        color: #333;
                        line-height: 24px;
                        margin-bottom: 4px;
                      "
                    >
                      Password
                    </div>
                    <input
                        :type="isPassword ? 'password' : 'text'"
                        v-model.trim="ruleForm.password"
                        autocomplete="off"
                        style="background: #eee; border: 0; width: 100%"
                    />
                    <img
                        src="@/assets/icons/svg/eye.svg"
                        alt=""
                        width="20"
                        height="20"
                        style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                        @click="isPassword = !isPassword"
                        v-if="isPassword"
                    />
                    <img
                        src="@/assets/icons/svg/eye-no.svg"
                        alt=""
                        width="20"
                        height="20"
                        style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                        @click="isPassword = !isPassword"
                        v-if="!isPassword"
                    />
                  </div>
                  <div style="flex: 1">
                    <div
                        style="
                        font-size: 16px;
                        color: #333;
                        line-height: 24px;
                        margin-bottom: 4px;
                      "
                    >
                      Confirm Password
                    </div>
                    <input
                        :type="isConfirmPassword ? 'password' : 'text'"
                        v-model.trim="ruleForm.confirmPassword"
                        autocomplete="off"
                        style="background: #eee; border: 0; width: 100%"
                    />
                    <img
                        src="@/assets/icons/svg/eye.svg"
                        alt=""
                        width="20"
                        height="20"
                        style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                        @click="isConfirmPassword = !isConfirmPassword"
                        v-if="isConfirmPassword"
                    />
                    <img
                        src="@/assets/icons/svg/eye-no.svg"
                        alt=""
                        width="20"
                        height="20"
                        style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                        @click="isConfirmPassword = !isConfirmPassword"
                        v-if="!isConfirmPassword"
                    />
                  </div>
                </div>
              </el-form-item>

              <el-form-item>
                <div
                    style="
                    font-size: 16px;
                    color: #333;
                    line-height: 24px;
                    margin-bottom: 4px;
                  "
                >
                  Invitation Code
                </div>
                <div style="display: flex; align-items: center">
                  <div style="width: 47%">
                    <input
                        type="text"
                        v-model.trim="ruleForm.y_code"
                        autocomplete="off"
                        class="invitation-code"
                    />
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="btn">
                <el-button
                    style="
                    width: 100%;
                    background-color: #0e9666;
                    height: 44px;
                    line-height: 44px;
                    padding: 0;
                    font-size: 16px;
                    margin-top: 40px;
                    letter-spacing: 1px;
                  "
                    @click="submitForm"
                    class="submit"
                >
                  Register
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="Mobile">
      <div class="contain">
        <div style="font-size: 21px;font-weight: bold;text-align: center;margin:30px 0 15px;">注册账号</div>
        <div style="padding: 0 35px;">
          <div class="account">
            <div
                style="
                    font-size: 14px;
                    color: #fff;
                    line-height: 20px;
                    margin-bottom: 12px;
                  "
            >
              邮箱
            </div>
            <input
                type="text"
                v-model.trim="ruleForm.username"
                autocomplete="off"
                style="background: #fff;border-radius: 20px;border:0!important;height: 34px"
            />
          </div>
          <div class="account" style="margin-top: 10px">
            <div
                style="
                    font-size: 14px;
                    color: #fff;
                    line-height: 20px;
                    margin-bottom: 12px;
                  "
            >
              验证码
            </div>
            <div>
              <input
                  type="text"
                  v-model.trim="ruleForm.code"
                  autocomplete="off"
                  style="background: #fff;border-radius: 20px;border:0!important;height: 34px;width: 60%"
              />
              <span
                  style="background: #fff;margin-left: 10px;padding: 0px 12px;border-radius: 20px;cursor: pointer;height: 34px;line-height: 34px;font-size: 14px;color:#000;display: inline-block"
                  @click="handlerCode">{{ sendContent }}</span>
            </div>

          </div>
          <div class="account" style="margin-top: 10px;position: relative">
            <div
                style="
                    font-size: 14px;
                    color: #fff;
                    line-height: 20px;
                    margin-bottom: 12px;
                  "
            >
              密码
            </div>
            <input
                :type="isPassword ? 'password' : 'text'"
                v-model.trim="ruleForm.password"
                autocomplete="off"
                style="background: #fff;border-radius: 20px;border:0!important;height: 34px"
            />
            <img
                src="@/assets/icons/svg/eye.svg"
                alt=""
                width="20"
                height="20"
                style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                @click="isPassword = !isPassword"
                v-if="isPassword"
            />
            <img
                src="@/assets/icons/svg/eye-no.svg"
                alt=""
                width="20"
                height="20"
                style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                @click="isPassword = !isPassword"
                v-if="!isPassword"
            />
          </div>
          <div class="account" style="margin-top: 10px;position: relative">
            <div
                style="
                    font-size: 14px;
                    color: #fff;
                    line-height: 20px;
                    margin-bottom: 12px;
                  "
            >
              确认密码
            </div>
            <input
                :type="isConfirmPassword ? 'password' : 'text'"
                v-model.trim="ruleForm.confirmPassword"
                autocomplete="off"
                style="background: #fff;border-radius: 20px;border:0!important;height: 34px"
            />
            <img
                src="@/assets/icons/svg/eye.svg"
                alt=""
                width="20"
                height="20"
                style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                @click="isConfirmPassword = !isConfirmPassword"
                v-if="isConfirmPassword"
            />
            <img
                src="@/assets/icons/svg/eye-no.svg"
                alt=""
                width="20"
                height="20"
                style="
                        position: absolute;
                        bottom: 10px;
                        right: 10px;
                        cursor: pointer;
                      "
                @click="isConfirmPassword = !isConfirmPassword"
                v-if="!isConfirmPassword"
            />
          </div>
          <div class="account" style="margin-top: 10px;">
            <div
                style="
                    font-size: 14px;
                    color: #fff;
                    line-height: 20px;
                    margin-bottom: 12px;
                  "
            >
              邀请码
            </div>
            <input
                type="text"
                v-model.trim="ruleForm.y_code"
                autocomplete="off"
                style="background: #fff;border-radius: 20px;border:0!important;height: 34px"
            />
          </div>
        </div>
        <div style="position: fixed;bottom: 0;left: 0;width: 100%;padding: 0 35px 20px;">
          <div
              style="width: 100%;height: 40px;line-height: 40px;text-align: center;background: #0e9666;border-radius: 20px;font-size: 14px;color: #fff;cursor: pointer;margin-top: 20px;"
              @click="submitForm">注册
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
import {reactive, ref, toRefs, getCurrentInstance} from "vue";

export default {
  name: "Login",
  setup() {
    /* 全局挂载utils工具类 start */
    const {proxy} = getCurrentInstance();
    const {$api, $common, $validate, $router, $elUtils} = proxy;

    /* 全局挂载 end */

    const loginForm = ref(null);
    const state = reactive({
      ruleForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: "",
        y_code: "", //邀请码
      },
      checked: true,
      isPassword: true,
      isConfirmPassword: true,
      sendContent: "Send Code",
      smsWait: 0,
      sendClass: false,
    });
    const submitForm = async () => {
      if (
          $validate.isNull(state.ruleForm.username) ||
          !$validate.isEmail(state.ruleForm.username)
      ) {
        $elUtils.warnMsg("E-Mail is not correct, please check.");
        return;
      }
      if ($validate.isNull(state.ruleForm.code)) {
        $elUtils.warnMsg("Code is not correct, please check.");
        return;
      }
      var pattern =
          /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,20}$/;
      if (
          $validate.isNull(state.ruleForm.password)
      ) {
        $elUtils.warnMsg(
            "The password must have 8-20 characters, including uppercase and lowercase letters, numbers and special characters."
        );
        return;
      } else if (state.ruleForm.password !== state.ruleForm.confirmPassword) {
        $elUtils.warnMsg(
            "The password and confirmation password must be consistent."
        );
      }
      const paramObj = {
        username: state.ruleForm.username,
        password: state.ruleForm.password,
        code: state.ruleForm.code,
        y_code: state.ruleForm.y_code,
      };
      $api
          .userRegister(paramObj)
          .then((res) => {
            if (res.code == 1) {
              $router.push({name: "Login"});
              $elUtils.successMsg("Register Success!!");
            } else {
              $elUtils.errorMsg(res.msg);
            }
          })
          .catch((err) => {
            $elUtils.errorMsg(err.msg);
          });
    };

    // 发送验证码
    const handlerCode = () => {
      if (state.smsWait !== 0) {
        return false;
      }
      if (
          $validate.isNull(state.ruleForm.username) ||
          !$validate.isEmail(state.ruleForm.username)
      ) {
        $elUtils.warnMsg("E-Mail is not correct, please check.");
        return;
      }
      $api
          .emsSend({email: state.ruleForm.username, event: "register"})
          .then((res) => {
            if (res.code == 1) {
              state.smsWait = 60;
              waitSms();
              state.smsInterval = setInterval(function () {
                waitSms();
              }, 1000);
            } else {
              $elUtils.warnMsg(res.msg);
              return;
            }
          });
    };

    // 验证码倒计时
    const waitSms = () => {
      state.smsWait--;
      if (state.smsWait === 0) {
        clearInterval(state.smsInterval);
        state.sendContent = "Send Code";
        state.sendClass = false;
      } else {
        state.sendClass = true;
        state.sendContent = state.smsWait;
      }
    };

    return {
      ...toRefs(state),
      loginForm,
      submitForm,
      handlerCode,
    };
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/assets/styles/index.scss";

input {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding-left: 10px;
  font-size: 16px;
  color: #333333;
  background: #eee;
  border: 0;
}

input:focus,
input:focus-visible {
  background-color: rgb(255, 255, 255) !important;
  border: 2px solid rgb(33, 138, 251) !important;
}

.input__inner {
  width: 100%;
  border: 0 !important;
  background: #eee !important;
}

.login-body {
  display: flex;
  /*x轴对齐*/
  justify-content: center;
  /*y轴对齐*/
  align-items: center;
  height: calc(100vh - 70px);
  width: 100%;
  background-color: #fff;

  .login-container {
    width: 500px;
    height: 380px;
    background-color: #fff;
    border-radius: 4px;
    margin-top: -100px;

    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px 0;

      .title {
        font-size: 24px;
        color: #333333;
        font-weight: bold;
      }
    }

    .login-form {
      width: 90%;
      margin: 0 auto;

      .username {
      }

      .password {
        margin: 20px 0;
      }

      .btn {
        .submit {
          background-color: rgba(255, 45, 137, 1);
          color: #ffffff;
          padding: 14px 20px;
          font-size: 16px;
        }
      }
    }
  }
}

.Mobile {
  color: #fff;
  height: 94vh;

  .contain {
    color: #fff;
    font-size: 14px;
  }

  input:focus,
  input:focus-visible {
    background-color: rgb(255, 255, 255) !important;
    border: 0 !important;
  }
}
</style>
